<template>
    <div>
        <el-form :model="form" ref="form" label-width="144px" class="ccui-form" :rules="rules">
            <el-row :gutter="10">
                <el-col :span="18">
                    <el-form-item label="冲销原因：" prop="writeoffReason">
                        <el-input
                            type="textarea"
                            :rows="5"
                            maxlength="1000"
                            show-word-limit
                            placeholder="请输入冲销原因"
                            v-model="form.writeoffReason"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="填报单位：" prop="reportInOrgName" class="el-form-item-box">
                        <el-select
                            class="select-supply"
                            v-model="form.reportInOrgName"
                            placeholder="请选择填报单位"
                            @change="changeReportInOrgId"
                        >
                            <el-option
                                v-for="item in reportOptions"
                                :key="item.orgId"
                                :label="item.name"
                                :value="item.name"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="冲销单编号：" prop="writeoffCode">
                        <el-input
                            v-model="form.writeoffCode"
                            :value="form.writeoffCode"
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="冲销单名称：" prop="writeoffName">
                        <el-input
                            v-model="form.writeoffName"
                            :value="form.writeoffName"
                            class="ccui-form-shortInput"
                            placeholder="请输入冲销单名称"
                            @blur="handleTrim('writeoffName')"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="冲销期间：">
                        <el-date-picker
                            v-model="form.reversal"
                            :clearable="false"
                            align="right"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            disabled
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item label="结算单编号：" prop="settlementCode" class="el-form-item-box has-btn">
                        <el-row>
                            <el-col :span="24">
                                <el-input v-model="form.settlementCode" placeholder="请选择结算单编号" disabled></el-input>
                                <el-button plain type="single-number" style="margin-left: 10px" @click="handleOpenDialog">选择</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="结算单名称：" prop="settlementName">
                        <el-input
                            v-model="form.settlementName"
                            :value="form.settlementName"
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="合同编号：" prop="contractCode">
                        <el-input
                            v-model="form.contractCode"
                            readonly
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="合同名称：" prop="contractName">
                        <el-input
                            v-model="form.contractName"
                            readonly
                            class="ccui-form-shortInput"
                            disabled
                            maxlength="15"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="供应商：" prop="supplierName">
                        <el-input
                            v-model="form.supplierName"
                            readonly
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="合同金额：" prop="contractMoney">
                        <el-input
                            v-model="form.contractMoney"
                            readonly
                            class="ccui-form-shortInput"
                            disabled
                            maxlength="15"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="冲销金额：" prop="writeoffMoney">
                        <el-input
                            v-model="form.writeoffMoney"
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="冲销数量：" prop="writeoffCount">
                        <el-input
                            v-model="form.writeoffCount"
                            class="ccui-form-shortInput"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="编制人：" prop="reportUsername">
                        <el-input
                            v-model="form.reportUsername"
                            class="ccui-form-shortInput"
                            maxlength="15"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="el-form-item-box" label="编制日期：" prop="reportTime">
                        <el-date-picker
                            v-model="form.reportTime"
                            :clearable="false"
                            align="right"
                            type="date"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            disabled
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
    
            <el-row :gutter="10">
                <el-col :span="18">
                    <el-form-item label="备注：" prop="remarks">
                        <el-input
                            type="textarea"
                            :rows="5"
                            maxlength="1000"
                            show-word-limit
                            placeholder="请输入备注"
                            v-model="form.remarks"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <contractDialog
            ref="contractDialog"
            :dialog-data="dialogData"
            :table-data="dialogData.tableData"
            @handlePageChange="handlePageChange"
            @search="search"
            @reset="reset"
            @getDialogTableData="getDialogTableData"
        />
    </div>
</template>

<script>
import {getUserInfo, getReportInOrgData} from "@/basa/api";
import {addUrlPerFix} from "@/basa/utils";
import {newWriteSettlementListPage, getSettlementById} from "@/app/settlement-management/equipment/api";
import contractDialog from "@/basa/components/public_practice/contractDialog";

export default {
    name: "basicInfo",
    props: {
      form: {
          type: Object,
          default: () => {}
      }
    },
    components: {contractDialog},
    data() {
        return {
            
            rules: {
                writeoffReason: [{required: true, message: "请填写冲销原因", trigger: "blur"}],
                reportInOrgName: [{ required: true, message: "请输入填报单位", trigger: "change" }],
                writeoffName: [{required: true, message: "请填写冲销单名称", trigger: "blur"}],
                settlementCode: [{required: true, message: "请选择结算单编号", trigger: "change"}],
                reversal: [{required: true, message: "请选择冲销期间", trigger: "blur"}],
                writeoffMoney: [{required: true, message: "请填写冲销金额", trigger: "blur"}],
                reportUsername: [{required: true, message: "请填写编制人", trigger: "blur"}],
                reportTime: [{required: true, message: "请选择编制日期", trigger: "blur"}]
            },
            reportOptions: [],
            dialogData: {
                title: "结算单查询",
                tableData: [],
                searchData: [
                    {
                        label: "结算单编号",
                        models: "settlementCode"
                    },
                    {
                        label: "合同编号",
                        models: "contractCode"
                    },
                    {
                        label: "填报单位",
                        models: "reportInOrgName"
                    },
                    {
                        label: "供应商",
                        models: "supplierName"
                    }
                ],
                tableTheadOptions: [
                    {prop: "settlementCode", label: "结算单编号", width: "100"},
                    {prop: "settlementName", label: "结算单名称"},
                    {prop: "reportInOrgName", label: "填报单位"},
                    {prop: "contractCode", label: "合同编号"},
                    {prop: "contractName", label: "合同名称"},
                    {prop: "supplierName", label: "供应商"},
                    {prop: "currSetCount", label: "结算数量"},
                    {prop: "currSetMoney", label: "结算金额"},
                ],
                pages: {
                    total: 0,
                    pageNo: 1,
                    pageSize: 10
                }
            },
        }
    },
    created() {
        this.getUserInfo();
    },
    methods: {
        // 提交表单验证
        handleSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        resolve(this.form);
                    } else {
                        reject("a");
                    }
                });
            });
        },
        handleOpenDialog() {
            if (!this.form.reportInOrgId && !this.form.reportInOrgName) {
                return this.$showErrorMessage("请先选择填报单位");
            }
            this.$refs["contractDialog"].dialogVisible = true;
            this.getDialog();
        },
        // 填报单位更改时触发
        changeReportInOrgId(row) {
            // 根据具体需求在修改
            const tempObj = this.reportOptions.find(e => e.name === row);
            this.form.reportInOrgId = tempObj.orgId;
            this.form.reportInOrgName = tempObj.name;
            // 切换时,清空相应字段值
            // if (this.form.contractCode != "") {
            //     let arr = [
            //         "contractCode",
            //         "contractName",
            //         "supplierName",
            //         "contractMoney"
            //     ];
            //     arr.forEach(e => {
            //         this.form[e] = "";
            //     });
            //     this.$nextTick(() => {
            //         this.form.clearValidate();
            //     });
            // }
        },
        // 结算单编号弹框
        getDialogTableData(row) {
            // 弹框选择返回data
            console.log(row);
            let arr = ["settlementCode", "settlementName", "contractCode", "contractName", "supplierName", "supplierId", "contractId"];
            arr.forEach(item => {
                this.form[item] = row[item];
            });
            this.form.settlementId = row.id;
            this.form.contractMoney = row.contractMoney !== null ? (+row.contractMoney).toFixed(2) : "";
            this.form.writeoffMoney = row.currSetMoney !== null && row.currSetMoney !== undefined ? (+row.currSetMoney).toFixed(2) : "";
            this.form.writeoffCount = row.currSetCount !== null ? (+row.currSetCount).toFixed(3) : "";
            this.form.reversal = [row.settlementStart, row.settlementEnd];
            this.getSettlementById(row.id);
        },
        // 获取结算单数据
        getSettlementById(id) {
            getSettlementById({id: id}).then(res => {
                console.log(res, 'res');
                let result = res.data.data;
                result.settlementList.map(e => {
                    e.unTransportCount = e.unTransportCount? (+e.unTransportCount).toFixed(3) : "";
                    e.settlementCount = e.settlementCount? (+e.settlementCount).toFixed(3) : "";
                    e.unitPriceWithTax = e.unitPriceWithTax? (+e.unitPriceWithTax).toFixed(2) : "";
                    e.moneyWithTax = e.moneyWithTax? (+e.moneyWithTax).toFixed(2) : "";
                    e.acceptCount = e.acceptCount? (+e.acceptCount).toFixed(2) : "";
                    e.unitPriceWithTax = e.unitPriceWithTax? (+e.unitPriceWithTax).toFixed(2) : "";
                });
                this.$emit("getSettlementList", result.settlementList);
            });
        },
        // 获取弹框数据
        getDialog(data) {
            let params = {
                ...data,
                reportInOrgId: this.form.reportInOrgId,
                pageNo: this.dialogData.pages.pageNo,
                pageSize: this.dialogData.pages.pageSize,
                settlementStatus: "5",
                isShowPageLoading: true
            };
            newWriteSettlementListPage(params).then(res => {
                let result = res.data.data;
                this.dialogData.tableData = result.rows;
                this.dialogData.pages.pageNo = result.pageNo;
                this.dialogData.pages.total = result.recordsTotal;
            });
        },
        // 分页 - 切换每页总条数 与 页数
        handlePageChange(val, type) {
            if (type === 'current') {
                this.dialogData.pages.pageNo = val;
                this.getDialog();
            } else if (type === 'size') {
                this.dialogData.pages.pageSize = val;
                this.getDialog();
            }
        },
        search(searchData) {
            this.getDialog(searchData);
        },
        // 分页重置
        reset() {
            this.dialogData.pages.pageNo= 1;
            this.dialogData.pages.pageSize= 10;
            this.getDialog();
        },
        // 获取登录信息
        getUserInfo() {
            getUserInfo(
                addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",{}
            ).then(res => {
                this.form.reportUsername = res.data.data.userInfo.name;
                this.getReportInOrgData(res.data.data.userInfo.openId);
            });
        },
        // 填报信息
        getReportInOrgData(openId) {
            getReportInOrgData({openIds: [openId], isShowPageLoading: true}).then(res => {
                this.reportOptions = res.data.data[openId];
                this.form.reportInOrgName =
                    this.form.reportInOrgName || this.reportOptions[0].name;
                this.form.reportInOrgId =
                    this.form.reportInOrgId || this.reportOptions[0].orgId;
            });
        },
        // 去除结算单名称空格
        handleTrim(key) {
            if (!this.form[key] || this.form[key] == "") return;
            this.$set(
                this.form,
                key,
                this.form[key].replace(/(^\s*)|(\s*)$/g, "")
            );
        },
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-input {
    width: 260px;
}

/deep/ .el-button--single-number {
    width: 46px;
    margin-left: 10px;
    padding: 0 9px;
}

/deep/ .ccui-pre-form-item {
    .el-form-item__label {
        line-height: 16px;
    }
}
</style>